<template>
  <div style="width: 100%;height: 100%">
    <div class="print" v-for=" (item, index) in drawQr" :key="index">
      <!-- <div :id="'qrcode'+index" style="margin:0 140px;"></div> -->
        <div class="printText" >
            <div class="title">{{item.plantName}}</div>
            <div class="contentTop" >
                <div class="content" >物料号：{{item.materialCode}}</div>
            </div>
            <div class="contentTop" >
                <div class="content" >物料名称：{{item.materialName}}</div>
            </div>
            <div class="contentTop">
                <div class="content" >规格：{{item.spec}}</div>
                <div class="content" >型号：{{item.model}}</div>
            </div>
            <div class="contentTop">
                <div class="content" >截面：{{item.predefine1}}</div>
                <div class="content" >颜色：{{item.predefine2}}</div>
            </div>
            <div class="contentTop">
                <div class="content" >数量（{{item.tmUnitName}}）：{{item.materialQty}}</div>
                <div class="content" >次单位（{{item.tmSubunitsName}}）：{{item.weight}}</div>
            </div>
            <div class="contentTop">
                <div class="content" >日期：{{item.printDate.slice(0, 10)}}</div>
                <div class="content" >批号：{{item.lotno}}</div>
            </div>
            <div class="contentTop">
                <div class="contentBottom" >供应商：{{(item.supplierCode ? item.supplierCode : '') + '/' +( item.supplierName ? item.supplierName : '')}}</div>
            </div>
            <div class="contentTop">
                <div class="contentBottom" >物料二维码：{{item.barcode}}</div>
            </div>
            <!-- <div>条码：{{item.barcode}}</div>
            <div>{{item.materialName}}</div>
            <div>{{item.materialCode}}</div> -->
        </div>
      <div :id="'qrcode'+index" class="qrcode"></div>
    </div>
  </div>
</template>

<script>
import  QRcode  from "qrcodejs2"

export default {
  components: {
    // barcode: VueBarcode
  },
  props: {
    drawQr:{ type: Array, default:[]},
  },
  created () {
    // this.paginator(this.delInfo)
  },
  mounted () {
      this.$nextTick(() => {
        this.qrcode();
      })
  },
  data () {
    return {}
  },
  methods: {
    qrcode(){
      console.log(this.drawQr)
      this.drawQr.map((x, index )=> {
        document.getElementById(`qrcode${index}`).innerHTML = '';
        let qrcode = new QRcode(`qrcode${index}`,{
          width:128,
          height:128,
          text:`${x.barcode}`
        });
      });
    },
  },
  watch: {
    drawQr: {
      handler(newVal) {
        if(newVal) {
          this.$nextTick(() => {
            this.qrcode();
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .print {
    // padding-top: 15px;
    width: 100%;
    height: 100%;
    position: relative;
  }
  .printText {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
  }
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
  }
  .contentTop {
      display: flex;
      // margin-left: 15%;
      //justify-content: left;
  }
  .content {
    flex:1;
    font-size: 10px;
    text-align: left;
  }
  .contentBottom {
    width: 100%;
    font-size: 10px;
    text-align: left;
  }
  .qrcode {
    position: absolute;
    right:0;
	  bottom:0;
    transform: scale(0.32);
    transform-origin: bottom right;
  }
</style>